<template>
    <div class="app-container">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-button v-if="hasPerm('sys:role:add')"
                        type="success"
                        plain
                        icon="el-icon-circle-plus-outline"
                        size="mini"
                        @click="openAddRole"
                >新增
                </el-button
                >
                <el-button v-if="hasPerm('sys:role:edit')"
                        type="primary"
                        plain
                        icon="el-icon-edit"
                        size="mini"
                        @click="openEditRole"
                >编辑
                </el-button
                >
                <el-button v-if="hasPerm('sys:role:delete')"
                        type="danger"
                        plain
                        icon="el-icon-delete"
                        size="mini"
                        @click="deleteRole"
                >删除
                </el-button
                >
                <el-button v-if="hasPerm('sys:role:addRP')"
                        type="info"
                        plain
                        icon="el-icon-more-outline"
                        size="mini"
                        @click="openResource"
                >分配资源权限
                </el-button
                >
            </el-form-item>
        </el-form>
        <el-table
                :data="hasPerm('sys:role:query')?list:[]"
                height="440"
                ref="selectRole"
                :highlight-current-row="true"
                @selection-change="roleChange"
                @row-click="roleClick"
        >
            <el-table-column label="序号" width="50" align="center" type="index">
            </el-table-column>

            <el-table-column align="center" label="id" v-if="false" prop="id">
            </el-table-column>

            <el-table-column align="left" label="角色名称" prop="name" width="300">
            </el-table-column>
            <el-table-column align="left" label="角色描述" prop="description" show-overflow-tooltip>
            </el-table-column>
        </el-table>


        <!--新增编辑角色窗口-->
        <el-dialog
                :visible.sync="dialogVisible"
                :title="dialogType === 'edit' ? '编辑角色' : '新增角色'"
        >
            <el-form
                    :model="role"
                    label-width="80px"
                    label-position="right"
                    :rules="rules"
                    ref="roleForm"
            >
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="role.name" placeholder="请输入名称"/>
                </el-form-item>

                <el-form-item label="id" v-if="false">
                    <el-input v-model="role.id"/>
                </el-form-item>

                <el-form-item label="角色描述">
                    <el-input v-model="role.description" placeholder="请输入描述"/>
                </el-form-item>

            </el-form>
            <div style="text-align: right">
                <el-button type="danger" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmForm('roleForm')">确认</el-button>
            </div>
        </el-dialog>

        <!--分配资源权限窗口-->
        <el-dialog
                :visible.sync="resourceVisible"
                title="分配资源"
                width="400px"
        >
            <div class="dialogDiv">
                <el-tree
                        :data="resourceList"
                        show-checkbox
                        node-key="id"
                        :props="defaultProps"
                        ref="resourceTree"
                        highlight-current
                        default-expand-all
                        :default-checked-keys="selectRP"
                >
                </el-tree>
            </div>
            <div style="text-align: right;margin-top: 10px">
                <el-button type="danger" size="mini" @click="resourceVisible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="confirmForm1">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import roleApi from '@/api/sys/role'
    import resourceApi from '@/api/sys/resource'

    const defaultModel = {
        id: '',
        name: '',
        description: ''
    }

    export default {
        //写核心代码位置
        data() {
            //定义变量和初始值
            return {
                role: Object.assign({}, defaultModel),
                dialogVisible: false,
                dialogType: 'add',
                list: [], //查询之后接口返回集合
                selectRole: [],
                resourceList: [],
                resourceVisible: false,
                selectRP: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                rules: {
                    name: [{ required: true, message: '请输入角色', trigger: 'blur' }]

                }
            }
        },
        created() {
            this.getList()
        },
        methods: {

            getList() {
                roleApi.getList().then((response) => {
                    this.list = response.data
                })
            },

            openAddRole() {
                this.role = Object.assign({}, defaultModel)
                this.dialogType = 'add'
                this.dialogVisible = true
            },

            openEditRole() {
                if (this.selectRole.length !== 1) {
                    this.$message({
                        showClose: true,
                        message: '请选择角色',
                        type: 'warning'
                    })
                    return
                }
                this.role = Object.assign({}, this.selectRole[0])
                this.dialogType = 'edit'
                this.dialogVisible = true
            },

            confirmForm(formName) {
                const isEdit = this.dialogType === 'edit'
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (isEdit) {
                            roleApi.update(this.role).then((response) => {
                                //请求成功
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                })
                                for (let index = 0; index < this.list.length; index++) {
                                    if (this.list[index].id === this.role.id) {
                                        this.list.splice(index, 1, this.role)
                                        break
                                    }
                                }
                                this.dialogVisible = false
                            })
                        } else {
                            roleApi.insert(this.role).then((response) => {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                })
                                this.dialogVisible = false
                                this.getList()
                            })
                        }
                    } else {
                        return false
                    }
                })
            },

            deleteRole() {
                if (this.selectRole.length !== 1) {
                    this.$message({
                        showClose: true,
                        message: '请选择一个角色',
                        type: 'warning'
                    })
                    return
                }
                this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    roleApi.delete(this.selectRole[0].id).then((response) => {
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getList()
                    })
                })
            },

            /**
             * 当选择改变时
             */
            roleChange(val) {
                let me = this
                me.selectRole = val
            },

            /**点击 */
            roleClick(row) {
                let me = this
                me.$refs.selectRole.clearSelection()
                me.$refs.selectRole.toggleRowSelection(row, true)
            },

            openResource() {
                if (this.selectRole.length !== 1) {
                    this.$message({
                        showClose: true,
                        message: '请选择一个角色',
                        type: 'warning'
                    })
                    return
                }
                this.selectRP = []
                resourceApi.getTreeAll().then((response) => {
                    this.resourceList = response.data
                    //根据角色查询资源列表
                    roleApi.getHasResourceByRole(this.selectRole[0].id).then((response) => {
                        this.selectRP = response.data
                        this.resourceVisible = true
                    })
                })
            },
            confirmForm1() {
                let keys = this.$refs.resourceTree.getCheckedKeys()
                // this.$refs.resourceTree.setCheckedKeys(['3|2'])
                let data = {
                    roleId: this.selectRole[0].id,
                    rpIds: keys
                }
                roleApi.insertRP(data).then((response) => {
                    this.$message({
                        message: '分配成功',
                        type: 'success'
                    })
                    this.resourceVisible = false
                })
            }
        }
    }
</script>
<style>
    .dialogDiv{
        height: 300px;
    }
</style>

